<template>
  <div class="app-container">
    <el-form :model="queryParamsForCust" ref="queryRef" :inline="true" v-show="showSearch" label-width="88px">
      <el-form-item label="对账月份" prop="BillDueDate" style="width: 230px">
        <el-date-picker clearable v-model="queryParamsForCust.BillDueDate" type="month" value-format="YYYY-MM-DD" placeholder="请选择订单日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="对账企业" prop="customerId">
        <el-select
            v-model="queryParamsForCust.customerId" filterable remote reserve-keyword placeholder="请输入简称"
            :remote-method="remoteMethodOfCustomer" @change="handleChangeOfCustomer" :loading="loadingForCust" >
          <el-option
              v-for="item in optionsOfCustomer" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="warning"-->
      <!--          plain-->
      <!--          icon="Download"-->
      <!--          @click="handleExport"-->
      <!--          v-hasPermi="['scm:scmCustomerOrders:export']"-->
      <!--        >导出</el-button>-->
      <!--      </el-col>-->
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getListForCust"
                     :linked-id="queryParamsForCust.customerId" :attachment-type="31"></right-toolbar>
    </el-row>

      <el-table v-loading="loadingForCust" :data="scmInventoryListForCust" >
        <el-table-column label="订单日期" align="center" prop="orderDate" width="100" />
        <el-table-column label="订单编号" align="center" prop="orderCode" width="170"/>
        <el-table-column label="图号" align="center" prop="scmProjectProducts.drawingNumber" width="100" />
        <el-table-column label="版本" align="center" prop="scmProjectProducts.version" width="100" />
        <el-table-column label="商品名称" align="center" prop="scmProjectProducts.productName" width="100" />
        <el-table-column label="订单数量" align="center" prop="orderTotalQuantity" width="100" />
        <el-table-column label="订单单价" align="center" prop="unitPrice" width="100" />
        <el-table-column label="交货金额（含税）" align="center" prop="changeQuantity" width="100" />
        <el-table-column label="订单纳期" align="center" prop="billDueDate" width="100" />
        <el-table-column label="交货日期" align="center" prop="createdAt" width="100" />
        <el-table-column label="出荷数量" align="center" prop="changeQuantity" width="100" />
        <el-table-column label="欠品数量" align="center" prop="quantityInThisTimeHasIssue" width="100" />
        <!--        <el-table-column label="交货履历" align="center" prop="remark" width="100" />-->
        <el-table-column label="対帳状態" align="center" prop="transportChannel" width="100" >
          <template #default="scope">
            <dict-tag :options="scm_bill_status" :value="scope.row.billStatus"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="totalForCust>0"
          :total="totalForCust"
          :page.sync="queryParamsForCust.pageNum"
          :limit.sync="queryParamsForCust.pageSize"
          @pagination="getListForCust"
      />
  </div>

</template>

<script setup>
import {listInventoryLogByCustomer} from "@/api/scm/scmInventoryLog.js";
import {listCustomer} from "@/api/scm/customer.js";

const { proxy } = getCurrentInstance();
const { scm_transport_channel, scm_bill_status } = proxy.useDict('scm_transport_channel', 'scm_bill_status' );

// 获取当月第一天的函数
const getFirstDayOfMonth = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
  return `${year}-${month}-01`;
};
const data = reactive({
  formForSupp: {},
  queryParamsForSupp: {
    pageNum: 1,
    pageSize: 10,
    projectId: null,
    changeType: 1
  },
  formForCust: {},
  queryParamsForCust: {
    pageNum: 1,
    pageSize: 10,
    projectId: null,
    changeType: 2,
    customerId: null,
    BillDueDate: getFirstDayOfMonth()
  }
});

const { queryParamsForSupp, formForSupp, queryParamsForCust } = toRefs(data);


const showSearchForSupp = ref(true)
const loadingForSupp = ref(false)
const scmInventoryListForSupp = ref([])
const totalForSupp = ref(0)
const loadingForCust = ref(false)
const scmInventoryListForCust = ref([])
const totalForCust = ref(0)
const single = ref(true)
const multiple = ref(true)
const title = ref('')
const openForSupp = ref(false)
const ids = ref([]);
const showSearch = ref(true);




// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
  console.log("ids:" + ids.value);
}

const getListForSupp = () => {
  loadingForSupp.value = true
  queryParamsForSupp.value.projectId = null;
  queryParamsForSupp.value.changeType = '1';
  listInventoryLogByCustomer(queryParamsForSupp.value).then(response => {
    scmInventoryListForSupp.value = response.rows;
    totalForSupp.value = response.total;
    loadingForSupp.value = false;
  })
}

const getListForCust = () => {
  loadingForCust.value = true
  queryParamsForCust.value.projectId = null;
  queryParamsForCust.value.changeType = '2';
  listInventoryLogByCustomer(queryParamsForCust.value).then(response => {
    scmInventoryListForCust.value = response.rows;
    totalForCust.value = response.total;
    loadingForCust.value = false;
  })
}


/** 搜索按钮操作 */
function handleQuery() {
  //检查对账月份和对账企业是否填写，如果没有填写，返回提示信息要求填写
  if (queryParamsForCust.value.BillDueDate == null || queryParamsForCust.value.customerId == null) {
    proxy.$modal.msgError("请填写对账月份和对账企业");
  }
  getListForCust();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParamsForCust.value.BillDueDate = getFirstDayOfMonth();
  queryParamsForCust.value.pageNum = 1;
  // handleQuery();
}

// 客户下拉框
const optionsOfCustomer = ref([]);
const customerList = ref([]);
const queryParamsOfCustomer = ref({});

function resetQueryOfCustomer() {
  queryParamsOfCustomer.value = {
    pageNum: 1,
    pageSize: 100,
    id: null,
    customerNo: null,
    name: null,
    nickname: null,
  }
}
function remoteMethodOfCustomer(query) {
  console.log('query', query);
  resetQueryOfCustomer();
  if (query !== ''){
    queryParamsOfCustomer.value.nickname = query.trim();
    listCustomerSelect();
  }
}
function handleChangeOfCustomer(value) {
  // form.value.customerId = value;
  // form.value.customerTitle = customerList.value.find(customer => customer.id === value).nickname;
  // form.value.customerContactId = 0;
  // form.value.customerContactName = " ";

}
function listCustomerSelect() {
  listCustomer(queryParamsOfCustomer.value).then(response => {
    customerList.value = response.rows;
    optionsOfCustomer.value = customerList.value.map(customer => ({
      label: customer.name,
      value: customer.id,
    }));
  });
}


getListForCust();

</script>